<template>
	<view class="detail-container">
		<!-- 消息头部 -->
		<view class="message-header">
			<view class="avatar">
				<text class="avatar-icon">{{ getAvatarIcon(messageDetail.type) }}</text>
			</view>
			<view class="header-info">
				<text class="sender-name">{{ getSenderName(messageDetail.type) }}</text>
				<text class="send-time">{{ formatTime(messageDetail.createTime) }}</text>
			</view>
		</view>
		
		<!-- 消息标题 -->
		<view class="message-title">
			<text class="title-text">{{ messageDetail.title }}</text>
		</view>
		
		<!-- 消息内容 -->
		<view class="message-content">
			<rich-text :nodes="messageDetail.htmlContent || messageDetail.content"></rich-text>
		</view>
		
		<!-- 订单相关信息 -->
		<view v-if="messageDetail.type === 'order' && messageDetail.orderInfo" class="order-info">
			<view class="info-title">相关订单</view>
			<view class="order-card" @click="viewOrder">
				<view class="order-header">
					<text class="order-no">订单号：{{ messageDetail.orderInfo.orderNo }}</text>
					<text class="order-status">{{ messageDetail.orderInfo.status }}</text>
				</view>
				<view class="order-goods">
					<image :src="messageDetail.orderInfo.goodsImage" class="goods-image"></image>
					<view class="goods-info">
						<text class="goods-name">{{ messageDetail.orderInfo.goodsName }}</text>
						<text class="goods-price">¥{{ messageDetail.orderInfo.totalAmount }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 活动相关信息 -->
		<view v-if="messageDetail.type === 'activity' && messageDetail.activityInfo" class="activity-info">
			<view class="info-title">活动详情</view>
			<view class="activity-card" @click="viewActivity">
				<image :src="messageDetail.activityInfo.banner" class="activity-banner"></image>
				<view class="activity-content">
					<text class="activity-title">{{ messageDetail.activityInfo.title }}</text>
					<text class="activity-desc">{{ messageDetail.activityInfo.description }}</text>
					<view class="activity-time">
						<text class="time-label">活动时间：</text>
						<text class="time-value">{{ messageDetail.activityInfo.startTime }} - {{ messageDetail.activityInfo.endTime }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 附件 -->
		<view v-if="messageDetail.attachments && messageDetail.attachments.length > 0" class="attachments">
			<view class="info-title">附件</view>
			<view class="attachment-list">
				<view 
					v-for="(file, index) in messageDetail.attachments" 
					:key="index"
					@click="previewFile(file)"
					class="attachment-item"
				>
					<text class="file-icon">{{ getFileIcon(file.type) }}</text>
					<view class="file-info">
						<text class="file-name">{{ file.name }}</text>
						<text class="file-size">{{ formatFileSize(file.size) }}</text>
					</view>
					<text class="download-icon">⬇️</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作 -->
		<view class="bottom-actions" v-if="false">
			<button @click="deleteMessage" class="action-btn delete">删除</button>
			<button v-if="messageDetail.type === 'order'" @click="viewOrder" class="action-btn primary">查看订单</button>
			<button v-else-if="messageDetail.type === 'activity'" @click="viewActivity" class="action-btn primary">查看活动</button>
			<button v-else @click="goBack" class="action-btn primary">返回</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageId: '',
			messageDetail: {
				id: 1,
				type: 'system',
				title: '系统升级通知',
				content: '系统将于今晚23:00-01:00进行升级维护，期间可能影响正常使用，敬请谅解。',
				htmlContent: '',
				createTime: '2024-01-15 14:30:00',
				isRead: false,
				orderInfo: null,
				activityInfo: null,
				attachments: []
			}
		}
	},
	
	onLoad(options) {
		if (options.id) {
			this.messageId = options.id
			this.loadMessageDetail()
		}
	},
	
	methods: {
		loadMessageDetail() {
			// TODO: 从API加载消息详情
			// 模拟不同类型的消息数据
			const mockData = {
				'1': {
					id: 1,
					type: 'system',
					title: '系统升级通知',
					content: '尊敬的用户，为了给您提供更好的服务体验，我们将于今晚23:00-01:00进行系统升级维护。',
					htmlContent: '<p>尊敬的用户：</p><p>为了给您提供更好的服务体验，我们将于<strong>今晚23:00-01:00</strong>进行系统升级维护。</p><p>升级期间可能出现以下情况：</p><ul><li>无法正常登录</li><li>订单处理延迟</li><li>支付功能暂停</li></ul><p>给您带来的不便，敬请谅解！</p>',
					createTime: '2024-01-15 14:30:00',
					isRead: true
				},
				'2': {
					id: 2,
					type: 'order',
					title: '订单发货通知',
					content: '您的订单已发货，预计2-3个工作日送达，请注意查收。',
					createTime: '2024-01-15 10:20:00',
					isRead: true,
					orderInfo: {
						orderNo: '202401150001',
						status: '已发货',
						goodsImage: '/static/images/goods1.jpg',
						goodsName: 'iPhone 15 Pro Max 256GB',
						totalAmount: '9999.00'
					}
				},
				'3': {
					id: 3,
					type: 'activity',
					title: '新春大促活动',
					content: '新春佳节，全场商品8折起，更有限时秒杀等你来抢！',
					createTime: '2024-01-14 16:45:00',
					isRead: true,
					activityInfo: {
						title: '新春大促',
						description: '全场商品8折起，满299免邮，更有限时秒杀商品等你来抢！',
						banner: '/static/images/activity-banner.jpg',
						startTime: '2024-01-20 00:00:00',
						endTime: '2024-02-10 23:59:59'
					}
				}
			}
			
			this.messageDetail = mockData[this.messageId] || this.messageDetail
		},
		
		getAvatarIcon(type) {
			const icons = {
				system: '⚙️',
				order: '📦',
				activity: '🎉'
			}
			return icons[type] || '📢'
		},
		
		getSenderName(type) {
			const names = {
				system: '系统消息',
				order: '订单中心',
				activity: '活动中心'
			}
			return names[type] || '通知中心'
		},
		
		formatTime(timeStr) {
			const date = new Date(timeStr)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			
			return `${year}-${month}-${day} ${hour}:${minute}`
		},
		
		getFileIcon(type) {
			const icons = {
				pdf: '📄',
				image: '🖼️',
				video: '🎥',
				audio: '🎵',
				zip: '📦'
			}
			return icons[type] || '📎'
		},
		
		formatFileSize(size) {
			if (size < 1024) {
				return size + 'B'
			} else if (size < 1024 * 1024) {
				return (size / 1024).toFixed(1) + 'KB'
			} else {
				return (size / (1024 * 1024)).toFixed(1) + 'MB'
			}
		},
		
		previewFile(file) {
			// TODO: 预览或下载文件
			uni.showToast({
				title: '文件预览功能开发中',
				icon: 'none'
			})
		},
		
		viewOrder() {
			if (this.messageDetail.orderInfo) {
				uni.navigateTo({
					url: `/pages/order/detail?orderNo=${this.messageDetail.orderInfo.orderNo}`
				})
			}
		},
		
		viewActivity() {
			if (this.messageDetail.activityInfo) {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			}
		},
		
		deleteMessage() {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条消息吗？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 调用删除API
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				}
			})
		},
		
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.detail-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 消息头部 */
.message-header {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.avatar-icon {
	font-size: 32rpx;
}

.header-info {
	flex: 1;
}

.sender-name {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.send-time {
	font-size: 24rpx;
	color: #999;
}

/* 消息标题 */
.message-title {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	line-height: 1.4;
}

/* 消息内容 */
.message-content {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

/* 信息标题 */
.info-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
}

/* 订单信息 */
.order-info {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.order-card {
	border: 2rpx solid #e5e5e5;
	border-radius: 10rpx;
	padding: 20rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.order-no {
	font-size: 28rpx;
	color: #333;
}

.order-status {
	font-size: 24rpx;
	color: #27B387;
	background-color: #f0fdf4;
	padding: 4rpx 8rpx;
	border-radius: 4rpx;
}

.order-goods {
	display: flex;
	align-items: center;
}

.goods-image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.goods-info {
	flex: 1;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.goods-price {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: bold;
}

/* 活动信息 */
.activity-info {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.activity-card {
	border: 2rpx solid #e5e5e5;
	border-radius: 10rpx;
	overflow: hidden;
}

.activity-banner {
	width: 100%;
	height: 200rpx;
	object-fit: cover;
}

.activity-content {
	padding: 20rpx;
}

.activity-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.activity-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	display: block;
	margin-bottom: 15rpx;
}

.activity-time {
	display: flex;
	align-items: center;
}

.time-label {
	font-size: 24rpx;
	color: #999;
}

.time-value {
	font-size: 24rpx;
	color: #27B387;
}

/* 附件 */
.attachments {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.attachment-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #e5e5e5;
	border-radius: 10rpx;
}

.file-icon {
	font-size: 32rpx;
	margin-right: 15rpx;
}

.file-info {
	flex: 1;
}

.file-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.file-size {
	font-size: 24rpx;
	color: #999;
}

.download-icon {
	font-size: 24rpx;
	color: #27B387;
}

/* 底部操作 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	border-top: 1rpx solid #e5e5e5;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 70rpx;
	border: 2rpx solid #27B387;
	color: #27B387;
	background-color: #fff;
	border-radius: 35rpx;
	font-size: 28rpx;
	line-height: 66rpx;
}

.action-btn.primary {
	background-color: #27B387;
	color: #fff;
}

.action-btn.delete {
	border-color: #ff4757;
	color: #ff4757;
}
</style>